<template>
    <div>
        <div class="flex-column ">          
              <!-- <swiper autoplay='true' loop='true'>
                  <image for="{{swiperArr}}" src='{{$item.imageUrl}}'></image>
              </swiper> -->
              <div class="tabList login flex-column" >
                  <!-- <div class="mt30 flex-column" style="margin-left: 8px;">
                      <div class=" justify-between"  >
                           <image src='photos/icon_tab_02.png'></image>
                      <text>登录立享更多资源</text>
                      </div>
                  
                  </div> -->
          <div class=" mt10 justify-between" style="margin-left: 8px;" >
                  <div class="item flex-column"  >
                      <image src="../photos/personlogin.png"></image>
                      <text class="tabtext" style="margin-top:10px" font-style="#fff">登录</text>
                  </div>
              </div><!-- tabList end -->
              <div class=" mt10 justify-between" style="margin-left: 8px;">
                  <div class="item flex-column"   for='{{tabListArr}}'>
                      <image src='{{$item.imgSrc}}'></image>
                      <text class="tabtext" style="margin-top:10px" font-style="#fff">{{$item.title}}</text>
                  </div>
              </div><!-- tabList end -->
              </div>
      
               <div class="title justify-between">
                      <text style="color: #9ebbaa; font-size: 42px;margin-left: 28px;">我的音乐</text>
                      <text style="margin-right: 28px;">更多&gt;</text>
                  </div>
  
              <div class="hotList justify-around">
                  <div class="hotListWrap flex-wrap justify-between">
                      <div class=" mt30 item flex-column" for="{{hotListArr}}">
                          <div class="mt20" style="background-image: url('../photos/灰色.png');"><image class="dian" src='{{$item.imgSrc}}'></image></div>
                          <text>{{$item.title}}</text>
                      </div>
                  </div>
              </div>
    
             <div class="title justify-between" style="margin-top:30px">
                      <text style="font-size: 42px;margin-left: 18px;">创建歌单</text>
                      <text style="color: #9ebbaa;font-size: 42px;">收藏歌单</text>
                      <image src="../photos/更多.png" style="width:30px;height:50px;margin-right: 0px;"></image>
                  </div>
  
                  <div class="mt40 justify-around" style="margin-top:25px">
                      <text style="font-size: 45px;color: dimgrey;">+&nbsp&nbsp导入外部歌单</text>
                  </div>
          </div>
    </div>
      </template>
      
      <script>
          import fetch from '@system.fetch'
          export default{
              private:{
                //   state:false,
                //   msg:'哈哈哈',
                  swiperArr:[],
                  tabListArr:[
                  {imgSrc:'../photos/icon_tab_01.png',title:'本地音乐'},
                      {imgSrc:'../photos/icon_tab_02.png',title:'下载管理'},
                      {imgSrc:'../photos/icon_tab_03.png',title:'我的电台'},
                      {imgSrc:'../photos/icon_tab_04.png',title:'我的收藏'},
                      {imgSrc:'../photos/icon_tab_05.png',title:'新歌专辑'},
                  ],
                  hotListArr:[
                      {imgSrc:'../photos/爱心.png',title:'我喜欢的音乐'},
                      {imgSrc:'../photos/大电台.png',title:'你的私人曲库'},
                      {imgSrc:'../photos/电音.png',title:'最嗨电音'}
                      
                  ]
              },
    // onInit:function(){}
            onInit(){//es6对象简洁写法，生命周期
                // var _this=this  1、保存this
                // console.log('我出生了',this);
                fetch.fetch({
                    url:'http://localhost:3000/banner',
                    responseType:'json',
                    // success:function(res){
                    //     console.log(res);
                    //     console.log(res.data.banners);
                    //     console.log(_this);//1、保存this
                    // }
                    success:(res)=>{//箭头函数
                        // console.log(this);
                        // console.log(res.data.banners);
                        this.banner=res.data.banners;
                        // console.log(banner);
                        this.swiperArr = res.data.banners;
                        console.log(swiperArr);
                    }
                })
                // 页面初始化时 获取全局数据
                // console.log('页面获取',this);
                // console.log(this.$app.$data.newset);
                this.hotList=this.$app.$data.newset
            },
            gotoDetail(id){
                // console.log('要到详情页面',id);
                router.push({
                    uri:'/DemoDetail',
                    params: { goId: id}
                })
            }
            
            
        }
      </script>
      
      <style>
          .flex-column{
              /* width:90%;*/
              margin: 10px;
              flex-direction: column;
          }
          .justify-around{
              justify-content: space-around;
          }
          .justify-between{
              justify-content: space-between;
              /* font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; */
            /* font-style: #742020;
            font-size:50px; */
          }
          text{
            /* font-style: #742020; */
            font-size:25px;
          }
  
          .text01{
            /* font-style: #742020; */
            font-size:50px;
          }
       
          .flex-wrap{
              flex-wrap: wrap
          }
          .mt40{
             
              margin: 20px;
             height: 80px;
              border-radius: 20px;
              /* justify-content: center;
              align-items: center; */
             justify-content: space-around;
              border:1px solid #000;
  
          }
          .mt30{
              width: 96%;
              margin-top: 10px;
              /* background-color:rgb(133, 124, 124); */
          }
          .mt20{
              width: 200px;
              margin-top: 10px;
              height: 200px;
              border-radius: 20px;
              justify-content: center;
              align-items: center;
             justify-content: space-around;
          }
           .mt10{
              width: 96%;
              margin-top: 10px;
              border-radius: 20px;
              background-color:rgb(133, 124, 124);
          }
          .login{
              width:100%;
              margin-top: 10px;
              /* background: dimgray; */
          }
          swiper{
              height: 300px
          }
          swiper image{
              border-radius:20px ;
              height: 300px;
          }
         .smallbox{
             width: 200px;
             height: 200px;
             background: dimgray;
             justify-content: center;
          align-items: center;
          justify-content: space-around;
  
         }
         input{
          font-size: 40px;
          border:1px dimgrey solid;
         }
         .dian{
             width: 80px;
             height: 80px;
         }
          .tabList{
              width: 100%;
              height: 280px;
              border:0px solid #000;
              border-radius:6px ;
              /* background: darkslateblue; */
    
          }
          .menuphoto{
              border-radius: 20px;
          }
        
          .hotList{
              border: 0px #000;
          }
          .hotListWrap .item{
              width: 27%;
          }
          /* .hotListWrap .item image{
          } */
     </style>